<include file="Public/header"/>
<div class="wrapper m-t">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <h3 class="font-bold no-margins">
                        <i class="fa fa-list-alt"></i> 订单数据统计图&nbsp;&nbsp;
                        <a class="confirm ajax-get" href="{:U('Index/tongji')}">
                            <small class="label label-success">更新</small>
                        </a>
                    </h3>
                    <div class="m-t-sm">
                        <div class="row">
                            <div class="col-md-5">
                                <div>
                                    <small>订单数量</small>
                                </div>
                                <div>
                                    <canvas id="numChart" height="114"></canvas>
                                </div>
                            </div>

                            <div class="col-md-5">
                                <div>
                                    <small>订单金额</small>
                                </div>
                                <div>
                                    <canvas id="priceChart" height="114"></canvas>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <ul class="stat-list m-t-lg">
                                    <li>
                                        <span class="no-margins h3">{$re.number_1}</span>
                                        <small class="label label-warning">待审核</small>
                                        <div class="progress progress-mini">
                                            <div class="progress-bar" style="width: {$props.number_1};"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no-margins h3">{$re.number_2}</span>
                                        <small class="label label-success">待确认</small>
                                        <div class="progress progress-mini">
                                            <div class="progress-bar" style="width: {$props.number_2};"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <span class="no-margins h3">{$re.number_3}</span>
                                        <small class="label label-info">生产中</small>
                                        <div class="progress progress-mini">
                                            <div class="progress-bar" style="width: {$props.number_3};"></div>
                                        </div>
                                    </li>

                                    <li>
                                        <span class="no-margins h3">{$re.number_4}</span>
                                        <small class="label label-primary">已完成</small>
                                        <div class="progress progress-mini">
                                            <div class="progress-bar" style="width: {$props.number_4};"></div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="m-t-md">
                        <small class="pull-right">
                            <i class="fa fa-clock-o"> </i>
                            更新时间：{$stime}
                        </small>
                        <small>
                            <strong>说明：</strong>图表1为订单数量，图表2为订单金额
                        </small>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins" id="info">
                <div class="ibox-title">
                    <h3><i class="fa fa-bell-o"></i> 消息列表</h3>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <td></td>
                                <th>订单号</th>
                                <th>消息</th>
                                <th>发送时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <volist name="_list" id="vo">
                                <tr>
                                    <td><span class="label label-primary"><if condition="$vo.is_read eq 1">已读
                                        <else/>
                                        未读
                                    </if></span></td>
                                    <td>{$vo.order_number}</td>
                                    <td>
                                        <div style="width:700px;height: 18px;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;">
                                            {$vo.content}
                                        </div>
                                    </td>
                                    <td>{$vo.sr_time|date='Y-m-d H:i:s',###}</td>
                                    <td>
                                        <a data-toggle="modal"
                                           onclick="looks({$vo.id},'{$vo.url}','{$vo.content}',{$vo.sr_time})"
                                           data-target="#msgmodel" class="btn btn-info btn-outline btn-sm"><i
                                                class="fa fa-folder"></i> 查看 </a>
                                        <a href="{:U('Index/infodel?id='.$vo[id])}" data-toggle="modal"
                                           data-target="#delsucc"
                                           class="ajax-get confirm btn btn-danger btn-outline btn-sm"><i
                                                class="fa fa-times"></i> 删除 </a>
                                    </td>
                                </tr>
                            </volist>
                            </tbody>

                        </table>
                        {$_page}
                        <!--消息弹框-->
                        <div class="modal inmodal" id="msgmodel" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content animated bounceInRight">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">
                                            <span aria-hidden="true">&times;</span>
                                            <span class="sr-only">关闭</span>
                                        </button>
                                        <h3 class="font-bold text-success" id="timeid"></h3>
                                    </div>
                                    <div class="modal-body">
                                        <p id="contents"></p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--消息弹框 endif-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<include file="Public/footer"/>
<!-- Flot -->
<script src="__PUBLIC__/Admin/js/plugins/flot/jquery.flot.js"></script>
<script src="__PUBLIC__/Admin/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="__PUBLIC__/Admin/js/plugins/flot/jquery.flot.resize.js"></script>
<!-- ChartJS-->
<script src="__PUBLIC__/Admin/js/plugins/chartJs/Chart.min.js"></script>
<script>
    function looks(id, url, content, sr_time) {
        contents = content + "<a href='" + url + "'>点击查看详情</a>";
        $("#contents").html(contents);
        $("#timeid").html(getLocalTime(sr_time));
        var get_url = "{:U('Index/isRead')}?s_id=" + id;
        $.get(get_url, function (re) {
            //执行回调函数
        })

    }
    function getLocalTime(nS) {
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
    }


    var datas = '{$datas}';
    datas = jQuery.parseJSON(datas);
    var arr = [];
    var price = [];
    $.each(datas, function (k, v) {
        arr.push(v.ordernumber);
        price.push(v.orderprice);
    })

    $(document).ready(function () {

        var priceData = {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            datasets: [
                {
                    label: "订单金额",
                    fillColor: "rgba(26,179,148,0.5)",
                    strokeColor: "rgba(26,179,148,0.7)",
                    pointColor: "rgba(26,179,148,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(26,179,148,1)",
                    data: price
                }
            ]
        };
        var numData = {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            datasets: [
                {
                    label: "订单数量",
                    fillColor: "rgba(0,200,220,0.7)",
                    strokeColor: "rgba(0,200,220,1)",
                    pointColor: "rgba(0,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: arr
                }
            ]
        };

        var lineOptions = {
            scaleShowGridLines: true,
            scaleGridLineColor: "rgba(0,0,0,.05)",
            scaleGridLineWidth: 1,
            bezierCurve: true,
            bezierCurveTension: 0.4,
            pointDot: true,
            pointDotRadius: 4,
            pointDotStrokeWidth: 1,
            pointHitDetectionRadius: 20,
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,
            responsive: true,
        };

        var ctx1 = document.getElementById("numChart").getContext("2d");
        var myNewChart1 = new Chart(ctx1).Line(numData, lineOptions);

        var ctx2 = document.getElementById("priceChart").getContext("2d");
        var myNewChart2 = new Chart(ctx2).Line(priceData, lineOptions);
    });
</script>